<!-- 老人等级分布组件 -->
<template>
  <div class="elder-age-chart">
    <div ref="chartContainer" class="chart-container"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch } from "vue";
import * as echarts from "echarts";

// 定义props
const props = defineProps({
  data: {
    type: Array,
    required: true,
    default: () => [],
  },
});

// 响应式变量
const chartContainer = ref(null);
let chartInstance = null;

// 初始化图表
const initChart = () => {
  if (!chartContainer.value) return;

  chartInstance = echarts.init(chartContainer.value);
  updateChart();
};

// 更新图表配置
const updateChart = () => {
  if (!chartInstance || !props.data.length) return;

  // 提取数据
  const categories = props.data.map((item) => item.ageGroup);
  const maleData = props.data.map((item) => item.male);
  const femaleData = props.data.map((item) => item.female);

  const option = {
    title: {
      text: props.title,
      left: "center",
      textStyle: {
        fontSize: 16,
        fontWeight: "bold",
        color: "#333",
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      formatter: function (params) {
        let result = params[0].name + "<br/>";
        params.forEach((param) => {
          result +=
            param.marker + param.seriesName + ": " + param.value + "人<br/>";
        });
        return result;
      },
    },
    legend: {
      data: ["男", "女"],
      top: 30,
      right: 20,
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      top: "20%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: categories,
      axisLabel: {
        fontSize: 8,
        color: "#666",
      },
    },
    yAxis: {
      type: "value",
      name: "人数",
      nameTextStyle: {
        color: "#666",
      },
      axisLabel: {
        fontSize: 10,
        color: "#666",
      },
    },
    series: [
      {
        name: "男",
        type: "bar",
        stack: "total",
        data: maleData,
        itemStyle: {
          color: "#5470c6",
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
      {
        name: "女",
        type: "bar",
        stack: "total",
        data: femaleData,
        itemStyle: {
          color: "#91cc75",
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };

  chartInstance.setOption(option);
};

// 响应式调整图表大小
const handleResize = () => {
  if (chartInstance) {
    chartInstance.resize();
  }
};

// 生命周期钩子
onMounted(() => {
  initChart();
  window.addEventListener("resize", handleResize);
});

onUnmounted(() => {
  if (chartInstance) {
    chartInstance.dispose();
    chartInstance = null;
  }
  window.removeEventListener("resize", handleResize);
});

// 监听数据变化
watch(
  () => props.data,
  () => {
    updateChart();
  },
  { deep: true }
);

watch(
  () => props.title,
  () => {
    updateChart();
  }
);
</script>

<style scoped>
.elder-age-chart {
  width: 100%;
  height: 100%;
}

.chart-container {
  width: 100%;
  height: 240px;
}
</style>
